<template>
  <div>
    <Box :caption="caption">
      <div class="storage__config" v-if="$route.path ==='/configManage/storageConfig'">
        <!-- 搜索栏、新增按钮 -->
        <div class="top">
          <el-input  v-model="search" placeholder="请输入存储配置" prefix-icon="el-icon-search" @keypress.enter.native="searchList"  clearable @clear="getStorageList"></el-input>
          <el-button class="search" @click="searchList"><i class="el-icon-search"></i>搜索</el-button>
          <el-button class="add right" @click="()=>{$router.push('/configManage/storageAdd')}"><i class="el-icon-plus"></i>新增</el-button>
        </div>
        <!-- 列表 -->
        <div class="content">
          <el-table
              :data="storageList"
              stripe>
            <el-table-column
                fixed
                prop="storageName"
                label="存储配置名称"
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="region"
                label="存储节点"
                :formatter="typeFormatter"
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="bucketName"
                label="桶名"
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="type"
                label="存储方式"
                min-width="120">
            </el-table-column>
            <el-table-column label="操作" width="220">
              <template slot-scope="scope">
                <div class="operation">
                  <el-tooltip
                      content="查看"
                      effect="light"
                      popper-class="small-tip"
                  >
                    <el-button
                        class="action-btn look"
                        icon="el-icon-view"
                        @click="()=>{$router.push({path:'/configManage/storageView',query:{id:scope.row.id}})}"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                      content="编辑"
                      effect="light"
                      popper-class="small-tip"
                  >
                    <el-button
                        class="action-btn edit"
                        icon="el-icon-edit"
                        @click="()=>{$router.push({path:'/configManage/storageEdit',query:{id:scope.row.id}})}"
                    ></el-button>
                  </el-tooltip>
                  <el-tooltip
                      content="删除"
                      effect="light"
                      popper-class="small-tip"
                  >
                    <el-button
                        class="action-btn del"
                        icon="el-icon-delete"
                        @click="deleteStorage(scope.row.id)"
                    ></el-button>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="footer">
          <el-pagination
              background
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :page-count="pageCount"
              >
          </el-pagination>
        </div>
      </div>
      <router-view/>
    </Box>
  </div>
</template>

<script>
import Box from '@/components/pc/Box'

export default {
  name: "storageConfig",
  components:{Box},
  data(){
    return{
      caption:"存储配置",
      search:'',
      storageList:[],
      regionList:'',
      currentPage:1,
      pageCount:0
    }
  },
  created() {
    this.getStorageList()
    this.getRegionList();

  },
  watch: {
 // 监听路由
	  $route(to,from){
		  // 进入之前
		  if(to.path == '/configManage/storageConfig'){
			  // 如果搜索不为空时
			  if(this.search !== ''){
				  this.transSearch();
			  }else {
				  this.getStorageList();
			  }
		  };
	  }
  },
  mounted() {
    this.getStorageList()
  },
  methods: {
    getRegionList() {
      this.$Http.regionList().then(res => {
        console.log(res);
        this.regionList = res.data;
      })
    },
    getStorageList(){
      this.$Http.storageList({
        limit: 8,
        current: this.currentPage,
      }).then(res=>{
        this.pageCount = res.data.pageCount;
        this.storageList = res.data.list;
      })
    },
    //换页
    handleCurrentChange(newPage){
      this.currentPage=newPage
      this.getStorageList()
    },
    //删除
    deleteStorage(id){
      this.$confirm('确认删除该存储配置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$Http.storageDel({
          id:id
        }).then(res=>{
          if(res.code === "SUCCESS"){
            this.$message.success("删除成功");
            this.getStorageList();
          }
          else{
            this.$message.error(res.message);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //查询
    searchList(){
      this.$Http.storageSearch({
          limit: 8,
          current: 1,
          name:this.search
      }
      ).then(res=>{
        this.currentPage = 1;
        this.pageCount = res.data.pageCount;
        this.storageList = res.data.list;
      })
    },
    typeFormatter(row){
      switch(row.region){
        case 'cn-north-4':
          return '北京四'
        default:
          return '其他'
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "src/assets/css/content.scss";

</style>

